<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>在线OJ系统</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="#">在线 OJ 系统</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link page-scroll" href="http://82.156.52.23:8080/OJProject/index.html">Home <span class="sr-only">(current)</span></a>
            </li>
        </ul>
    </div>
</nav>

<!--hero section-->
<section class="bg-hero">
    <div class="container">
        <div class="row vh-100">
            <div class="col-sm-12 my-auto text-center">
                <h1>在线 OJ 系统</h1>
                <p class="lead text-capitalize my-4">
                    基于 Java 实现的在线 OJ 系统
                </p>
                <a href="https://github.com/zx04180521" class="btn btn-outline-light btn-radius btn-lg">Github 链接</a>
                <br><br>
                <a href="https://blog.csdn.net/zhangxxin?spm=1000.2115.3001.5343" class="btn btn-outline-light btn-radius btn-lg">CSDN博客链接</a>
            </div>
        </div>
    </div>
</section>

<!--components-->
<section class="my-5 pt-5" id="app">
    <div class="container">
        <!-- 表示题目列表页 -->
        <div class="row mb-5" id="tables" v-show="status=='list'">
            <div class="col-sm-12">
                <div class="mt-3 mb-5">
                    <h3>题目列表</h3>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>标题</th>
                            <th>难度</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="problem in problems" v-on:click="getProblem(problem.id)">
                            <td>{{problem.id}}</td>
                            <td>{{problem.title}}</td>
                            <td>{{problem.level}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 表示题目详情页 -->
        <!-- 两个页面都在一个 html 中, 通过一些简单的技巧来完成显示上的切换 -->
        <div class="row mb-5" v-show="status=='detail'">
            <div class="col-sm-12">
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                        <!-- 放置题目的标题和难度 -->
                        <h3>{{problem.id}}.{{problem.title}}.{{problem.level}}</h3>
                        <!-- 用来显示一个文本的原始内容 -->
                        <!-- 在 pre 标签内部来放置题目的要求 -->
                        <pre>{{problem.description}}</pre>
                    </div>
                </div>
                <!-- v-model 能够做到双向绑定, 只要编辑框发生变化, 变量的值就改变了 -->
                <div>
                    <div id="editor" style="min-height:400px;">
                        <textarea style="width: 100%; height: 200px"></textarea>
                    </div>
                </div>
                <button type="button" class="btn btn-success" v-on:click="compile(problem.id)">提交</button>
            </div>
        </div>
    </div>
</section>

<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <!-- <h3>Upgrade to Pro Version</h3>
                    <p class="pt-2">
                        We are working on <b>Charcoal Pro</b> which will be released soon. The pro version
                        will have a lot more components, sections, icons, plugins and example pages.
                        Join the waiting list to get notified when we release it (plus discount code).
                    </p>
                    <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                    <hr class="my-5"/> -->
                <p class="pt-2 text-muted">
                    &copy; 版权所有, 西安建筑科技大学  张鑫
                </p>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
<script>
    var app = new Vue({
        // #app CSS 中的 id 选择器
        el: '#app',
        data: {
            status: 'list',  // 'list' 题目列表 'detail' 题目详情
            problems: [

            ],
            // 当前用户选中的题目
            problem: {
                // id: 1,
                // title: '两数之和',
                // level: '简单',
                // description: '这是题目要求',
                // templateCode: 'templateCode'
            }
        },
        methods: {
            getProblems() {
                // jquery 这个库发送 ajax 请求的方式
                $.ajax({
                    url: 'problem',
                    type: 'get',
                    // data http 响应的 body, status 就是状态码
                    success: function (data, status) {
                        app.problems = data;
                    }
                })
            },
            getProblem(problemId) {
                $.ajax({
                    url: 'problem?id=' + problemId,
                    type: 'get',
                    success: function (data, status) {
                        app.problem = data;
                        app.status = 'detail';
                        // 预期点击某个题目的时候, 就能把题目的代码模板设置进去
                        editor.setValue(data.templateCode);
                    }
                });
            },
            compile(problemId) {
                // 这个方法会在点击 提交 按钮的时候触发
                // 就会给服务器发送一个 ajax 请求
                var question = {
                    id: problemId,
                    // code 就是 textarea 里的代码
                    // editor.getValue() 就能获取到编辑框内部的代码
                    code: editor.getValue(),
                }
                $.ajax({
                    url: 'compile',
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    // data 属性放置请求的 body 内容
                    // JS 里把对象转成 JSON 字符串的方法
                    data: JSON.stringify(question),
                    success: function (data, status) {
                        // 把得到的响应结果直接通过对话框的形式来显示
                        var msg = data.errno + "\n";
                        if (data.reason) {
                            msg += data.reason;
                        }
                        if (data.stdout) {
                            msg += data.stdout;
                        }
                        alert(msg);
                    }
                })
            }
        }
    });

    app.getProblems();

    // ace.js 的代码一定要放到 vue 的代码的后面.
    // 否则 ace.js 会受到 vue 的干扰就不生效了
    // 此处参数的 editor 就对应到上面的 <div id="editor">
    let editor = ace.edit("editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/java");
    editor.resize();
    document.getElementById('editor').style.fontSize = '20px';
</script>
</body>

</html>